<template>
  <div class="container">
    <el-form :inline="true" size="small">
      <el-form-item>
        <el-input
          type="text"
          placeholder="请输入医院名称"
          v-model="hospitalname"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHospital"
          >搜索</el-button
        > </el-form-item
      ><br />

      <el-form-item label="医院省市(区/县)">
        <el-select
          v-model="sid"
          placeholder="选择省"
          @focus="getProvinces"
          @change="getCitys"
        >
          <el-option
            v-for="province in provinces"
            :key="province.id"
            :value="province.sid"
            :label="province.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="cid" placeholder="选择市" @change="getDistricts">
          <el-option
            v-for="city in cities"
            :key="city.id"
            :value="city.sid"
            :label="city.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="did" placeholder="选择区">
          <el-option
            v-for="district in districts"
            :key="district.id"
            :value="district.sid"
            :label="district.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="股东/分销商">
        <el-select v-model="shareholder" placeholder="--所有人员--">
          <el-option value="1" label="股东"></el-option>
          <el-option value="2" label="一级分销商"></el-option>
          <el-option value="3" label="二级分销商"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="收益分成(%)">
        <el-select v-model="gainshare" placeholder="--所有人员--">
          <el-option value="1" label="0%-10%"></el-option>
          <el-option value="2" label="10%-20%"></el-option>
          <el-option value="3" label="20%-30%"></el-option>
          <el-option value="4" label="30%-50%"></el-option>
          <el-option value="5" label="50%-100%"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建日期">
        <div class="block">
          <el-date-picker
            v-model="createtime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" size="small"
        ><router-link to="/hospital/addHospital"
          >新增医院</router-link
        ></el-button
      >
      <el-button type="primary" size="small">导入医院</el-button>
      <el-button type="primary" size="small">导出医院</el-button>
    </div>
    <el-table :data="records" border style="width: 100%">
      <el-table-column prop="hospital.id" label="医院编号" width="180">
      </el-table-column>
      <el-table-column prop="hospital.name" label="医院名称" width="180">
      </el-table-column>
      <el-table-column prop="user.name" label="医院对接人" width="180">
      </el-table-column>
      <el-table-column prop="user.phone" label="对接人电话" width="180">
      </el-table-column>
      <el-table-column prop="hospital.card" label="银行卡号"> </el-table-column>
      <el-table-column prop="hospital.rent" label="租金"> </el-table-column>
      <el-table-column prop="hospital.income" label="收益分成">
        <template slot-scope="scope"
          >{{ scope.row.hospital.income | gainshareFilter('%') }}
        </template>
      </el-table-column>
      <el-table-column prop="hospital.time" label="创建时间"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" round icon="el-icon-info" size="mini"
              ><router-link :to="'/hospital/hospitalDetail/' + scope.row.id"
                >详情</router-link
              ></el-button
            >
            <el-button
              type="danger"
              round
              size="mini"
              icon="el-icon-delete"
              @click="deleteHospital(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next,sizes,jumper,total"
      :page-sizes="[2, 4, 6]"
      :current-page="page"
      :page-size="limit"
      :total="total"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "http://localhost:8080/jiapei/hospital/hospitals",
      records: [],
      provinces: [],
      sid: "",
      cities: [],
      cid: "",
      districts: [],
      did: "",
      shareholder: "",
      gainshare: "",

      createtime: [],
      hospitalname: "",
      page: "",
      limit: "",
    };
  },
  mounted() {
    this.getHospitalList();
  },
  filters: {
    gainshareFilter(val, logo) {
      return val + logo;
    },
  },
  methods: {
    getHospitalList() {
      this.$axios({
        url: this.url,
        method: "GET",
        params: {
          page: this.page,
          limit: this.limit,
          hospitalName: this.hospitalname,
          province: this.sid,
          city: this.cid,
          district: this.did,
          gainshare: this.gainshare,
          shareholder:this.shareholder,
          startTime: this.createtime[0],
          endTime: this.createtime[1],
        },
      }).then((res) => {
        this.records = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    currentChange(cp) {
      this.page = cp;
      this.getHospitalList();
    },
    sizeChange(size) {
      this.limit = size;
      this.getHospitalList();
    },
    searchHospital() {
      this.getHospitalList();
    },
    saveHospital() {
      window.alert("kdnkdk");
      return true;
    },
    deleteHospital(id) {
      this.$confirm("确定删除该条信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.$axios({
          url: `http://localhost:8080/jiapei/hospital/hospital/${id}`,
          method: "DELETE",
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message({ message: res.data.message, type: "success" });
            this.getHospitalList();
          } else if (res.data.code == 205) {
            this.$message({ message: res.data.message, type: "warning" });
            this.getHospitalList();
          }
        });
      });
    },
    getProvinces() {
      this.$axios({
        url: "http://localhost:8080/jiapei/area/provinces",
        method: "GET",
      }).then((res) => {
        console.log(res);
        this.provinces = res.data.data.provinces;
      });
    },
    getCitys() {
      this.cid = "";
      this.did = "";
      this.districts = [];
      var sid = this.sid;
      this.$axios({
        url: `http://localhost:8080/jiapei/area/cities/${sid}`,
        method: "GET",
      }).then((res) => {
        this.cities = res.data.data.cities;
      });
    },
    getDistricts() {
      this.did = "";
      var cid = this.cid;
      this.$axios({
        url: `http://localhost:8080/jiapei/area/districts/${cid}`,
        method: "GET",
      }).then((res) => {
        this.districts = res.data.data.districts;
      });
    },
  },
};
</script>

<style>
.el-table th > .cell {
  text-align: center;
}
.el-table .cell {
  text-align: center;
}
</style>